<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="250"></canvas>

    <script>
      const canvas = document.getElementById('myCanvas')
      const ctx = canvas.getContext('2d')

      // 绘制矩形
      // ctx.rect(10, 10, 100, 100)
      // ctx.fill()

      // 矩形区域填充颜色
      // ctx.fillStyle = 'pink'
      // ctx.fillRect(10, 10, 100, 100)

      // 绘制一个矩形区域的边框
      // ctx.strokeStyle = 'red'
      // ctx.strokeRect(10, 10, 100, 100)

      // 擦除指定矩形区域的像素颜色
      // 等同于形成了一个5像素宽度的边框
      ctx.fillRect(10, 10, 100, 100)
      ctx.clearRect(15, 15, 90, 90)
    </script>
  </body>
</html>
